Ext.ux.BrowseButton = Ext
		.extend(
				Ext.Button,
				{
					url : null,
					name : 'file',
					inputEl : null,
					clipEl : null,
					formEl : null,
					btn_width : null,
					btn_height : null,
					// button的handler和scope另存
					original_handler : null,
					original_scope : null,

					/**
					 * @access private
					 */
					initComponent : function() {
						Ext.ux.BrowseButton.superclass.initComponent.call(this);
						this.original_handler = this.handler || null;
						this.original_scope = this.scope || window;
						this.handler = null;
						this.scope = null;
					},

					onRender : function(ct, position) {
						Ext.ux.BrowseButton.superclass.onRender.call(this, ct,
								position);
						// 记录已生成的button（是一个table）的长宽信息
						this.btn_width = this.el.getWidth();
						if (Ext.isIE7)
							this.btn_width -= 16;
						this.btn_height = this.el.getHeight();
						// this.el.position('relative');
						// 根据已有button建立以下三项
						this.createClipEl();
						this.createInputEl();
						this.createFormEl();
					},

					createClipEl : function() {
						// 创建dom对象
						this.clipEl = this.el
								.child('.x-btn-center')
								.createChild(
										{
											tag : 'div',
											style : 'position:absolute;border:none;overflow:hidden;'
										});
						// 设置剪切框的大小
						this.clipEl.setStyle('width', this.btn_width + 'px');
						this.clipEl.setStyle('height', this.btn_height + 'px');

						// 设置剪切框的位置
						// this.clipEl.setTop(this.clipEl.getTop() - 36 + 'px');
						// this.clipEl.setLeft(this.clipEl.getLeft() - 11 +
						// 'px');
						if (Ext.isIE8) {
							this.clipEl.setY(this.el.getY() - 2);
							this.clipEl.setX(this.el.getX() - 2);
						} else if (Ext.isIE7) {
							this.clipEl.setY(this.el.getY() - 2);
							this.clipEl.setX(this.el.getX() - 1);
						} else {
							this.clipEl.setY(this.el.getY() - 1);
							this.clipEl.setX(this.el.getX() - 1);
						}
					},

					createInputEl : function() {
						this.inputEl = Ext.DomHelper
								.append(
										this.clipEl,
										{
											tag : 'input',
											type : 'file',
											size : 1,
											name : this.name,
											style : 'position:relative;display:block;border:none;cursor:pointer;'
										}, true);
						// 设置透明
						this.inputEl.setOpacity(0.0);
						// 设置输入框的大小，适度大一些，放入剪切框中心
						this.inputEl.setStyle('width', this.btn_width + 10
								+ 'px');
						this.inputEl.setStyle('height', this.btn_height + 10
								+ 'px');
						// 设置输入框的位置
						if (!Ext.isIE7) {
							this.inputEl.setTop(-5);
							this.inputEl.setLeft(-5);
						} else {
							this.inputEl.setTop(-6);
							this.inputEl.setLeft(-7);
						}
						// 处理鼠标事件
						if (this.handleMouseEvents) {
							this.inputEl
									.on('mouseover', this.onMouseOver, this);
							this.inputEl
									.on('mousedown', this.onMouseDown, this);
						}
						this.inputEl.on('change', this.onChange, this);
						this.inputEl.on('click', function(e) {
							e.stopPropagation();
						});
					},

					createFormEl : function() {
						this.formEl = Ext.DomHelper
								.append(
										Ext.getBody(),
										{
											tag : 'form',
											method : 'post',
											action : this.url,
											style : 'position:absolute;left:-100px;top:-100px;width:100px;height:100px'
										});
					},

					detachInputEl : function(no_create) {
						var result = this.inputEl;
						this.inputEl.removeAllListeners();
						this.inputEl = null;
						this.createInputEl();
						return result;
					},

					onChange : function() {
						Ext.MessageBox.wait('上传中...', "请稍等");
						var inputEl = this.detachInputEl();
						inputEl.appendTo(this.formEl);
						Ext.Ajax
								.request({
									method : 'POST',
									isUpload : true,
									url : this.url,
									params : this.params,
									form : this.formEl,
									success : function(response, option) {
										inputEl.remove();
										Ext.MessageBox.hide();
										if (Ext.util.JSON
												.decode(response.responseText).success) {
											top.Ext.example.msg('消息', '导入成功！');
											if (this.original_handler) {
												this.original_handler.call(
														this.original_scope,
														this);
											}
										} else {
											Ext.MessageBox
													.alert(
															'错误',
															'导入失败！原因如下：<br>'
																	+ Ext.util.JSON
																			.decode(response.responseText).msg);
										}
									},
									failure : function(response, option) {
										inputEl.remove();
										Ext.MessageBox.hide();
										top.Ext.example.msg('错误', '导入失败！');
									},
									scope : this
								});
					}
				});
